<template>
  <ScreenModal
    :width="screenModal"
    title="部件详情"
    v-model="isVisible"
  >
    <div class="spring_box">
      <div class="spring_top spring_content">
        <div class="spring_bottom_box">
          <div class="spring_top_title">
            <div class="spring_top_tag">
              <span class="active_title">安全岛</span>
              <span class="active_tab"></span>
            </div>
          </div>

          <div class="spring_top_text">
            <img :src="bujianDetail.picture" alt="">
          </div>
        </div>

        <div class="spring_bottom_box">
          <p>
            <span>部件所属类型：</span>
            <span>{{ bujianDetail.obj_name }}</span>
          </p>
          <p>
            <span>主管单位：</span>
            <span>{{ bujianDetail.dept_name1}}</span>
          </p>
          <p>
            <span>部件当前状态：</span>
            <span>{{ bujianDetail.obj_state }}</span>
          </p>
          <p>
            <span>权属单位：</span>
            <span>{{ bujianDetail.dept_name2 }}</span>
          </p>
          <p>
            <span>部件来源：</span>
            <span>{{bujianDetail.data_source }}</span>
          </p>
          <p>
            <span>上报问题次数：</span>
            <span>{{ bujianDetail.reportNum }}</span>
          </p>
          <p>
            <span>养护单位：</span>
            <span>{{ bujianDetail.dept_name3 }}</span>
          </p>
          <p>
            <span>案件发生频率：</span>
            <span>{{ bujianDetail.orderState }}</span>
          </p>
        </div>
      </div>

      <div
        class="spring_right"
        v-if="scrollData.length"
      >
        <div class="spring_right_title">关联案件列表</div>
        <div class="mg-t-30">
          <ZuiXinAnJian
            :classOption="classOption"
            :isImg="false"
            :scrollData="scrollData"
            :servers="3"
          ></ZuiXinAnJian>
        </div>
      </div>
    </div>
  </ScreenModal>
</template>

<script>
import ZuiXinAnJian from './ZuiXinAnJian/ZuiXinAnJian.vue'
import { BuJianMapDB } from '@/api'

export default {
  name: 'popup',
  components: {
    ZuiXinAnJian
  },
  data() {
    return {
      isVisible: false,
      list: [],
      xiaoquData: {},
      classOption: {
        singleHeight: 154,
        direction: 1
      },
      bujianDetail: {},
      scrollData: [],
    }
  },
  computed: {
    screenModal() {
      return this.scrollData.length > 0 ? 1280 : 792
    }
  },
  methods: {
    open(e) {
      this.isVisible = true
      this.bujianDetail = null
      this.getCommunityInfo(e.id)
      this.getGpsInfoOrder(e.id)
    },

    // 部件点位详情
    getCommunityInfo(id) {
      const data = {
        id: id
      }
      BuJianMapDB.getGpsInfo(data).then(res => {
        this.bujianDetail = res.data[0];
      })
    },

    // 关联案件列表
    getGpsInfoOrder(id) {
      const data = {
        id,
      }
      BuJianMapDB.getGpsInfoOrder(data).then(res => {
        this.xiaoquData = res.data
        this.scrollData = res.data.map(item => {
          let obj = {
            "staLink": item.staLink,
            "createTime": item.time,
            "orderNum": item.id,
            "sourceTitle": item.sourceTitle,
            "title": item.title,
            "content": item.title,
          }
          if (item.sourceTitle == '数字城管') {
            obj.staFrom = 1
          }else if (item.sourceTitle == '便民热线') {
            obj.staFrom = 2
          } else {
            obj.staFrom = 3
          }
          return obj
        })
      })
    },
  }
}
</script>

<style lang="less" scoped>
.spring_box {
  width: 100%;
  height: 100%;
  padding-top: 4rem;
  display: flex;
  // flex-direction: column;
  .spring_content {
    width: 72.7rem;
    background: linear-gradient(0deg, rgba(18, 81, 210, 0.3), rgba(33, 158, 255, 0.1));
    border: 1px solid #219eff;
    border-radius: 1rem;
    padding: 2rem 3rem;
    .spring_top_text {
      img {
        width: 66.5rem;
        height: 29rem;
      }
    }

    .spring_bottom_box {
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      p {
        margin-top: 2rem;
        span:nth-child(1) {
          font-size: 1.4rem;
          font-family: Microsoft YaHei UI;
          font-weight: 400;
          color: #9ED5FF;
        }
        span:nth-child(2) {
          font-size: 1.4rem;
          font-family: Microsoft YaHei UI;
          font-weight: 400;
          color: #FFFFFF;
        }
      }
      p:nth-child(2n) {
        width: 60%;
      }
      p:nth-child(2n - 1) {
        width: 40%;
      }
    }
    .spring_top_title {
      width: 100%;
      border-bottom: 1px solid rgba(185, 224, 255, 0.2);

      .spring_top_tag {
        width: 6.4rem;
        margin-right: 3rem;
        text-align: center;
        span {
          display: inline-block;
        }
        .active_title {
          font-size: 1.6rem;
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #ffffff;
        }
        .active_tab {
          width: 2.8rem;
          height: 0.4rem;
          margin-top: 1.2rem;
          background: #17a7eb;
        }
        .active {
          font-size: 1.4rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #75aada;
        }
      }
    }
    .spring_top_content {
      font-size: 1.4rem;
      font-family: Noto Sans S Chinese;
      font-weight: 400;
      color: #9ed5ff;
      line-height: 2.4rem;
      padding: 2rem 0 1.6rem;
      .spring_top_img {
        div {
          text-align: center;
          margin-top: 2rem;
          span {
            display: block;
          }
        }
      }
    }
  }

  .spring_right {
    width: 45.8rem;
    margin-left: 3rem;
    &_title {
      width: 45.8rem;
      height: 5rem;
      background: rgba(31, 73, 135, 0.6);
      border: 1px solid rgba(33, 158, 255, 0.3);
      font-size: 1.8rem;
      font-family: Noto Sans S Chinese;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 5rem;
    }
  }
}
</style>